<template>
  <div style="margin-top:20px;">
    <div class="search-main c-shadow">
      <h3>企业信息查询</h3>
      <div class="ent-name">
        <div class="aside-title">企业名称：</div>
        <input type="text" v-model="entname">
      </div>
      <div class="mutiple-control">
        <div class="single-control">
        <div class="aside-title">法人/股东：</div>
        <input type="text" v-model="legal">
        </div>
        <div class="single-control">
        <div class="aside-title big">注册资本(万元)：</div>
        <input type="text" v-model="moneyStart"> <span>-</span> <input type="text" v-model="moneyEnd">
        </div>
      </div>
      <div class="area">
        <div class="aside-title">所属区域：</div>
        <div class="area-items" id="areaLabel">
          <span v-for="area in areas" :class="{sel:area.sel}"
           :key="area.name" @click="selectLabel('areaLabel',area)">{{area.name}}</span>
        </div>
      </div>
      <div class="area">
        <div class="aside-title">行业分类：</div>
        <div class="area-items" id="indestryLabel">
          <span v-for="industry in industrys" :class="{sel:industry.sel}"
          :key="industry.name" @click="selectLabel('indestryLabel',industry)">{{industry.name}}</span>
        </div>
      </div>
      <div class="single-control">
        <!-- <j-datePicker v-model="dateStart"></j-datePicker><span>-</span>
        <j-datePicker v-model="dateEnd"></j-datePicker> -->
        <span class="demonstration aside-title">注册时间：</span>
        <el-date-picker
          v-model="value1"
          type="month"
          value-format="yyyy-MM"
          placeholder="选择月">
        </el-date-picker>-
        <el-date-picker
          v-model="value2"
          type="month"
          value-format="yyyy-MM"
          placeholder="选择月">
        </el-date-picker>
        <span class="redsp">
          {{timemesg}}
        </span>
      </div>
      
      <h4 class="detail-base-title">上市信息</h4>
      <div class="area">
        <div class="aside-title big">境内上市模块：</div>
        <div class="area-items" id="typeLable">
          <span v-for="(type,index) in types" :class="{sel:(index === typesNum)}"
          :key="type" @click="selectLabel('typeLable',type)">{{type}}</span>
        </div>
      </div>
      <div class="btn-control">
        <el-button type="primary" class="ent-search" icon="el-icon-search" @click="goList">检索</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { jDatePicker } from '../../components'
export default {
  data() {
    return {
      entname: '',
      timemesg:'',
      legal: '',
      moneyStart: '',
      value1:'',
      value2:'',
      moneyEnd: '',
      dateStart: '',
      dateEnd: '',
      area: [],
      industry: [],
      type: '',
      params: {},
      areas: [
        { sel: false, name: '北京', flag: 11 },
        { sel: false, name: '天津', flag: 12 },
        { sel: false, name: '河北', flag: 13 },
        { sel: false, name: '山西', flag: 14 },
        { sel: false, name: '内蒙古', flag: 15 },
        { sel: false, name: '辽宁', flag: 21 },
        { sel: false, name: '吉林', flag: 22 },
        { sel: false, name: '黑龙江', flag: 23 },
        { sel: false, name: '上海', flag: 31 },
        { sel: false, name: '江苏', flag: 32 },
        { sel: false, name: '浙江', flag: 33 },
        { sel: false, name: '安徽', flag: 34 },
        { sel: false, name: '福建', flag: 35 },
        { sel: false, name: '江西', flag: 36 },
        { sel: false, name: '山东', flag: 37 },
        { sel: false, name: '河南', flag: 41 },
        { sel: false, name: '湖北', flag: 42 },
        { sel: false, name: '湖南', flag: 43 },
        { sel: false, name: '广东', flag: 44 },
        { sel: false, name: '广西', flag: 45 },
        { sel: false, name: '海南', flag: 46 },
        { sel: false, name: '重庆', flag: 50 },
        { sel: false, name: '四川', flag: 51 },
        { sel: false, name: '贵州', flag: 52 },
        { sel: false, name: '云南', flag: 53 },
        { sel: false, name: '西藏', flag: 54 },
        { sel: false, name: '陕西', flag: 61 },
        { sel: false, name: '甘肃', flag: 62 },
        { sel: false, name: '青海', flag: 63 },
        { sel: false, name: '宁夏', flag: 64 },
        { sel: false, name: '新疆', flag: 65 },
        { sel: false, name: '台湾', flag: 71 },
        { sel: false, name: '香港', flag: 81 },
        { sel: false, name: '澳门', flag: 82 }
      ],
      areasNum: -1,
      industrys: [
        { sel: false, name: '农、林、牧、渔业', flag: 'A' },
        { sel: false, name: '采矿业', flag: 'B' },
        { sel: false, name: '制造业', flag: 'C' },
        { sel: false, name: '电力、燃气及水的生产和供应业', flag: 'D' },
        { sel: false, name: '建筑业', flag: 'E' },
        { sel: false, name: '交通运输、仓储和邮政业', flag: 'F' },
        { sel: false, name: '批发和零售业', flag: 'H' },
        { sel: false, name: '住宿和餐饮业', flag: 'I' },
        { sel: false, name: '金融业', flag: 'J' },
        { sel: false, name: '房地产业', flag: 'K' },
        { sel: false, name: '租赁和商务服务业', flag: 'L' },
        { sel: false, name: '科学研究、技术服务和地质勘查业', flag: 'M' },
        { sel: false, name: '水利、环境和公共设施管理业', flag: 'N' },
        { sel: false, name: '居民服务和其他服务业', flag: 'O' },
        { sel: false, name: '教育', flag: 'P' },
        { sel: false, name: '卫生、社会保障和社会福利业', flag: 'Q' },
        { sel: false, name: '文化、体育和娱乐业', flag: 'R' }
      ],
      industrysNum: -1,
      types: ['沪主板', '深主板', '中小板', '创业板', '新三板', '港交所'],
      typesNum: -1
    }
  },
  methods: {
    getParams() {
      this.params = {}
      if (this.entname) {
        this.params.entName = this.entname || ''
      }
      if (this.legal) {
        this.params.legalPerson = this.legal || ''
      }
      if (this.moneyStart) {
        this.params.regMoneyStart = this.moneyStart || ''
      }
      if (this.moneyEnd) {
        this.params.regMoneyEnd = this.moneyEnd || ''
      }
      // if (this.dateStart) {
      //   this.params.registerDateStart = this.dateStart || ''
      // }
      // if (this.dateEnd) {
      //   this.params.registerDateEnd = this.dateEnd || ''
      // }
      if (this.value1) {
        // console.log(this.value1)
        this.params.registerDateStart = this.value1 || ''
      }
      if (this.value2) {
        this.params.registerDateEnd = this.value2 || ''
      }
      if (this.area.length > 0) {
        this.params.provinceID = this.area.join(',') || ''
      }
      if (this.industry.length > 0) {
        this.params.GCID = this.industry.join(',') || ''
      }
      if (this.type) {
        this.params.domesticlistplate = this.type || ''
      }
    },
    goList() {
      if ((!this.value1 && this.value2) || (this.value1 && !this.value2)) {
        this.timemesg = '开始注册时间和结束注册时间皆不为空'
      } else {
        this.timemesg = ''
        this.getParams()
        this.$router.push({ name: 'enterPrise1', query: this.params })
      }
    },
    selectLabel(id, param) {
      switch (id) {
        case 'areaLabel':
          param.sel = !param.sel
          this.area = this.areas
            .filter(item => item.sel === true)
            .map(item => item.flag)
          break
        case 'indestryLabel':
          param.sel = !param.sel
          this.industry = this.industrys
            .filter(item => item.sel === true)
            .map(item => item.flag)
          break
        case 'typeLable':
          if (this.type === param) {
            this.type = ''
            this.typesNum = -1
          } else {
            this.typesNum = this.types.indexOf(param)
            this.type = param
          }
          break
      }
    }
  },
  mounted() {
  },
  components: {
    jDatePicker
  }
}
</script>
<style lang="scss" scoped>
.search-main {
  padding: 2px 40px 40px;
  h3 {
    font-size: 24px;
    color: #6a6a6a;
    text-align: center;
    line-height: 75px;
  }
  .aside-title {
    width: 90px;
    color: #999;
    line-height: 40px;
    &.big {
      width: 120px;
    }
  }
  input[type='text'] {
    border: 1px solid #d9d9d9;
    height: 40px;
    box-sizing: border-box;
    border-radius: 5px;
  }
  .ent-name {
    display: flex;
    margin-bottom: 12px;
    input {
      flex: 1;
    }
  }
  .mutiple-control {
    display: flex;
    margin-bottom: 20px;
    .single-control {
      display: flex;
      flex: 1;
      span {
        padding: 0 10px;
        line-height: 40px;
        color: #b7d3f9;
      }
      input {
        flex: 1;
      }
    }
    .single-control + .single-control {
      margin-left: 40px;
    }
  }
  .area {
    display: flex;
    margin-bottom: 20px;
    .aside-title {
      line-height: 24px;
    }
    .area-items {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      span {
        padding: 5px 15px;
        margin: 0 30px 20px 0;
        background: #e2f1ff;
        color: #3cafff;
        border-radius: 5px;
        cursor: pointer;
        cursor: pointer;
        &.sel {
          background: #ffe5ce;
          color: #ff7200;
        }
      }
    }
  }
  h4.detail-base-title {
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    padding: 30px 0 0 12px;
    position: relative;
    background-image: linear-gradient(0deg, #1891ef, #1891ef);
    background-size: 3px 16px;
    background-position: 0 37px;
    background-repeat: no-repeat;
    border-bottom: 1px solid #eee;
    margin: 0 0 20px -20px;
  }
  .btn-control {
    text-align: center;
    .ent-search {
      width: 120px;
    }
  }
  .redsp {
    margin-left: 10px;
    color: #F21414 !important;
  }
}
</style>



// WEBPACK FOOTER //
// src/view/clib/search.vue